<template>
<div>
  <div class="myCollectDiv" v-for="item in collectItem" :key="item.productId">
    <dl class="collectDt">
      <dt class="collectProductImg">
        <img :src="item.imgUrl">
      </dt>
      <dd class="collectProductTxt">
        <h3 class="collectProductName">{{item.productName}}</h3>
        <p class="collectProductPrice">￥{{item.sellPrice}}</p>
      </dd>
    </dl>
    <ul class="collectBottom"> 
      <li @click="cancelCollect(item.productId)">取消收藏</li>
      <li @click="toIndex">去逛逛</li>
    </ul>
  </div>
</div>
</template>
<script>
  export default {
    props: {
      collectItem: {
        type: Array,
      },
    },  
    methods:{
      cancelCollect(id){
        this.$http.get(`products/fav/${id}`).then((res)=>{ 
         this.$emit("cancelCollect",true)
        })
      },
      toIndex(){
        const url = '../index/main';
        wx.switchTab({ url }) 
      },
    }
  }
</script>
<style scoped>
.myCollectDiv{
  background: #fff;
  margin-bottom: 20rpx;
  border-top: 1rpx solid #efeff4;
}
.myCollectDiv .collectDt{
  display: flex;
  padding: 40rpx 30rpx;
}
.myCollectDiv .collectDt .collectProductImg{
  width: 175rpx;
  height: 175rpx;
  margin-right: 25rpx;
}
.myCollectDiv .collectDt .collectProductImg img{
  width: 100%;
  height: 100%;
}
.myCollectDiv .collectDt .collectProductTxt {
  flex: 1;
}
.myCollectDiv .collectDt .collectProductTxt .collectProductName{
  font-size: 28rpx;
  line-height: 34rpx;
  color: #2a2a2a;
}
.myCollectDiv .collectDt .collectProductTxt .collectProductPrice{
  font-size: 30rpx;
  color: #e38a8a;
  margin-top: 30rpx;
}
.collectBottom{
  height: 100rpx;
  padding: 0 30rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-top: 1rpx solid #efeff4;
  border-bottom: 1rpx solid #efeff4;
}
.collectBottom li{
  width: 160rpx;
  height: 60rpx;
  box-sizing: border-box;
  border: 1rpx solid #000;
  border-radius: 5rpx;
  font-size: 26rpx;
  color: #000;
  margin-left: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
